import React, { useState, useRef } from 'react';
import styles from './AIPage.module.css';
import AIAvatar, { AIAvatarRef, ColorType } from '../../components/AIAvatar';
import { Toast } from '@repo/ui';

const AIPage: React.FC = () => {
  const [showToast, setShowToast] = useState(false);
  const avatarRef = useRef<AIAvatarRef>(null);

  const handleVoiceClick = () => {
    setShowToast(true);
    // 触发智能体表情切换
    avatarRef.current?.switchExpression();
  };

  const handleToastHide = () => {
    setShowToast(false);
  };

  return (
    <div className={styles.container}>
      {/* 智能体图标区域 */}
      <div className={styles.aiAgentSection}>
        <AIAvatar 
          ref={avatarRef}
          size={200} 
          autoExpression={true}
          colorType={ColorType.AUTO}
          onClick={handleVoiceClick}
        />
      </div>

      {/* 语音操作栏 */}
      <div className={styles.voiceControlBar}>
        <div className={styles.controlBar}>
          <button 
            className={styles.voiceButton}
            onClick={handleVoiceClick}
          >
            <svg className={styles.micIcon} viewBox="0 0 24 24" fill="none">
              {/* 麦克风主体 */}
              <rect x="9" y="2" width="6" height="11" rx="3" fill="currentColor"/>
              {/* 麦克风支架 */}
              <path d="M6 10v2c0 3.31 2.69 6 6 6s6-2.69 6-6v-2" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round"/>
              {/* 麦克风底座 */}
              <line x1="12" y1="20" x2="12" y2="24" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
              <line x1="8" y1="24" x2="16" y2="24" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
            </svg>
          </button>
        </div>
      </div>

      {/* Toast 提示 */}
      <Toast
        show={showToast}
        title="智能对话功能"
        message="即将上线，敬请期待！"
        type="info"
        duration={3000}
        onHide={handleToastHide}
      />
    </div>
  );
};

export default AIPage;

